<template
  ><div>
    <div class="content">
      <article class="item1"></article>
      <article class="item2"></article>
      <article class="item1"></article>
      <article class="big-box"></article>
      <article class="item2"></article>
    </div>
    <div class="content">
      <article class="item1"></article>
      <article class="big-box"></article>
    </div>
    <hr />

  </div>
</template>

<script>
export default {
  name: "FlexLayout"
};
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: row;
  flex-flow: wrap;
  justify-content: center;
  align-items: stretch;
  color: black;
  background-color: #d7dde4;
  border: 2px #666666 solid;
  overflow: auto;
}

.item1 {
  width: 200px;
  /*flex-grow: 1;*/
  /*flex-shrink: 1;*/
  align-self: flex-end;
  vertical-align: text-bottom;
  height: 300px;
  border: 3px lightgreen solid;
  margin: 1em;
}
.item2 {
  width: 300px;
  /*flex-grow: 1;*/
  /*flex-shrink: 1;*/
  vertical-align: text-bottom;
  height: 150px;
  border: 3px lightgreen solid;
  margin: 1em;
}
.big-box {
  width: 400px;
  height: 168px;
  border: 4px green solid;
}

</style>
